<template>
    <h1>我是APP组件</h1>

    <button @click="flag = !flag">展示或隐藏</button>
    
    <!-- <Transition>
        <p v-if="flag">p标签文本</p>
    </Transition> -->

    <transition-group>
        <p v-if="flag">p标签文本</p>
        <p v-if="flag">p标签文本</p>
        <p v-if="flag">p标签文本</p>
        <p v-if="flag">p标签文本</p>
    </transition-group>
</template>

<script>

export default {
    data() {
        return {
            flag: false,
        }
    },
};
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>
